<template>

  <el-dialog
      v-model="addressDialogVis"
      title="添加收货地址"
      width="30%"
  >
    <div class="dialogFormContainer">
      <el-form :model="addressForm" label-width="120px">
        <el-form-item label="收货人">
          <el-input v-model="addressForm.deliveryName" />
        </el-form-item>
        <el-form-item label="省份">
          <el-input v-model="addressForm.province" />
        </el-form-item>
        <el-form-item label="市">
          <el-input v-model="addressForm.city" />
        </el-form-item>
        <el-form-item label="地区">
          <el-input v-model="addressForm.district" />
        </el-form-item>
        <el-form-item label="详细地址">
          <el-input
              v-model="addressForm.fullAddress"
              maxlength="30"
              placeholder="请输入详细地址"
              show-word-limit
              type="textarea"
          />
        </el-form-item>
        <el-form-item label="手机号">
          <el-input v-model="addressForm.phone" />
        </el-form-item>
        <el-form-item>
          <el-checkbox v-model="addressForm.isDefault" label="是否设置为默认"/>
        </el-form-item>
      </el-form>
    </div>
    <template #footer>
      <span class="dialog-footer">
        <el-button @click="addressDialogVis = false">取消</el-button>
        <el-button type="primary" @click="addAddress">
          添加地址
        </el-button>
      </span>
    </template>
  </el-dialog>

<div class="costContainer">
  <div class="constContent">
    <div class="address">
      <span style="display: flex">
        <h4>选择收货地址</h4>
        <span
            @click="addressDialogVis=true"
            style="line-height: 65px;margin-left: 20px;color: #b4b4f8;cursor: pointer">新建地址</span>
      </span>
      <div class="addressList">
        <div
            ref="addressCardsRef"
            :class="`addressCard addressIndex${index}`"
            v-for="(addr,index) in deliveryAddressList"
            @click="checkAddr(index)"
            :key="addr.id"
        >
          <div>{{addr.deliveryName}}  &nbsp;   {{addr.phone}}</div>
          <div style="margin-top: 10px">{{addr.province}} {{addr.city}} {{addr.district}} {{addr.fullAddress}}</div>
        </div>
      </div>
    </div>
    <el-divider/>
    <div class="goods">
      <span style="display: flex">
        <h4>商品清单</h4>
      </span>
    </div>
  </div>
</div>
</template>

<script setup lang="ts">


import {onMounted, ref} from "vue";
import {deliveryAddress} from "../../model/deliveryAddressModel";
import address from "../../api/address";
import {userStore} from "../../store/userStore";
import {ElMessage} from "element-plus";

const userStoreImpl = userStore();
const addressCardsRef = ref([])
const addressDialogVis = ref(false);
const addressForm = ref({
  deliveryName:'',province:'',
  city:'',district:'',
  phone:'',isDefault:'',
  fullAddress:''
})
const deliveryAddressList = ref<deliveryAddress[]>([])
const checkAddr = (index) => {
  let dom = document.getElementsByClassName(`addressIndex${index}`)[0];
  if (dom) {
    dom.style.border = '1px solid red';
  }
  let doms = document.getElementsByClassName("addressCard");
  if (doms) {
    for (let i = 0 ; i < doms.length ; i++) {
      let curDOM = doms[i];
      if (curDOM && curDOM != dom) {
        curDOM.style.border = '';
      }
    }
  }
}
const addAddress = () => {
  let delivery: deliveryAddress = {
    deliveryName: addressForm.value.deliveryName,
    province: addressForm.value.province,
    city: addressForm.value.city,
    district: addressForm.value.district,
    phone: addressForm.value.phone,
    fullAddress: addressForm.value.fullAddress,
    isDefault: addressForm.value.isDefault ? "1" : "0",
    userId: userStoreImpl.user.id
  };
  address.insert(delivery)
      .then(res => {
        if (res.data.code == 200) {
          ElMessage({
            type: 'success',
            message: '添加成功'
          })
          addressDialogVis.value = false;
        } else {
          ElMessage({
            type: 'success',
            message: '添加失败'
          })
        }
      })
}

const getAddressByUserId = () => {
  if (userStoreImpl.user.id) {
    address.getById(userStoreImpl.user.id)
        .then(res => {
          deliveryAddressList.value = res.data.data.getById;
          console.log(deliveryAddressList.value);
        })
  }

}

const initData = () => {
  getAddressByUserId();
}

onMounted(() => {
  initData();
})
</script>

<style scoped>
.costContainer{
  width: 100%;
  height: 100%;
  background-color: #fafafa;
  display: flex;
  justify-content: center;
}
.constContent{
  width: 1024px;
  background-color: #fff;
  padding: 10px 18px 20px;
  margin-top: 50px;
}
.address{
  height: 194px;
  width: 100%;
}
.addressList{
  height: 130px;
  display: flex;
}
.addressCard{
  width: 314px;
  height: 100px;
  border: 1px solid #e3e3e3;
  padding-top: 20px;
  padding-left: 20px;
  margin-right: 20px;
}
.addressCard:hover{
  border: 1px solid red;
}
.addressCard>div:first-child{
  font-weight: 700;
}
.addressCard>div{
  font-size: 12px;
}
</style>
